<template>
    <a-layout id="components-layout-demo-fixed-sider">
        <a-layout-sider breakpoint="lg" :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: 0 }">
            <div class="logo" />
            <a-menu
                theme="dark"
                mode="inline"
                :selectKeys="selecTed"
                @select="handleClick"
                >
                <a-menu-item v-for="menu in menus" v-if="!menu.children && !menu.hidden" :key="menu.name">
                    <a-icon :type="menu.meta.icon" />
                    <span class="nav-text">{{ menu.meta.title }}</span>
                </a-menu-item>

                <a-sub-menu v-for="menu in menus" v-if="menu.children && !menu.hidden" :key="menu.name" :isSubMenu="true">
                    <span slot="title"><a-icon :type="menu.meta.icon" /><span>{{ menu.meta.title }}</span></span>
                    <a-menu-item v-for="item in menu.children" :key="item.name" v-if="!menu.hidden">
                        <a-icon :type="item.meta.icon" />
                        <span class="nav-text">{{ item.meta.title }}</span>
                    </a-menu-item>

                    <!-- 暂不处理 3级目录 -->
                    <!--          <a-sub-menu key="sub1-2" title="Submenu">
                                <a-menu-item key="5">
                                  Option 3
                                </a-menu-item>
                                <a-menu-item key="6">
                                  Option 4
                                </a-menu-item>
                              </a-sub-menu>-->
                </a-sub-menu>
            </a-menu>
        </a-layout-sider>
        <a-layout :style="{top: 0, background: '#eaebea'}">
<!--            <a-layout-header :style="{ background: '#001427', padding: 0 }" >
                <user-layout style="float: right;"></user-layout>
            </a-layout-header>-->
            <a-layout-content :style="{ marginLeft: '10vh', minHeight: '300px',}">
                <div :style="{ padding: '25px 0', textAlign: 'center'}">
                    <router-view></router-view>
                </div>
            </a-layout-content>
            <!--      <a-layout-footer :style="{ textAlign: 'center' }">
            &lt;!&ndash;        Ant Design ©2018 Created by Ant UED&ndash;&gt;
                  </a-layout-footer>-->
        </a-layout>
    </a-layout>
</template>

<script>
import {frame_routes} from "@/config/router";
import UserLayout from "@/components/frame/UserLayout.vue";
import {left} from "core-js/internals/array-reduce";
export default {
    data() {
        return{
            selecTed:[],
            menus:[]
        }
    },
    components:{
        UserLayout
    },
    methods:{
        left,
        handleClick(e){
            this.selecTed = [e.key];
            // 菜单的 key 就是路由的 name
            this.$router.push({name: e.key});
        },
        handleOpenChange(openKeys){
            const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
            if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
                this.openKeys = openKeys;
            } else {
                this.openKeys = latestOpenKey ? [latestOpenKey] : [];
            }
        }
    },
    created() {
        let that = this;
        this.selecTed = this.$route.path;
        this.menus = frame_routes[0].children;
        // this.menus.forEach(item =>{
        //     that.rootSubmenuKeys.push(item.name);
        // })
    }
}
</script>

<style>
#components-layout-demo-fixed-sider .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
}
</style>
